<template>
  <div class="note-class-wrapper">
    <div class="note-class" :class="{ 'hide': state.isMenuShow }">
      <header>
        <!-- //点击菜单是否展示,添加hide，active，平移 -->
        <div @click="() => state.isMenuShow = true">
          <van-icon name="wap-nav" size="25px" />
        </div>
        <div>
          <van-icon name="edit" size="25px"  @click="goPublich"/>
          <van-icon name="like-o" size="25px" />
          <van-icon name="search" size="25px" />
        </div>
      </header>
      <section>
        <div class="note-item" @click="goNoteList(item.title)" :style="`background-image:url(${item.img})`"
          v-for="(item, index) in noteClassList" :key="index">
          <span class="title">{{ item.title }}</span>
        </div>
      </section>
    </div>
    <!-- menu菜单 -->
    <!--@hidden="" 子组件给父组件传的事件  -->
    <Menu class="menu" @hidden="hideMenu" :class="{ 'active': state.isMenuShow }"></Menu>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import Menu from '../components/Menu.vue'
import { useRouter } from 'vue-router';

const router = useRouter()

const noteClassList = [
  { img: require("@/assets/img/raw_1512446214.jpeg"), title: "美食" },
  { img: require("@/assets/img/raw_1512446225.jpeg"), title: "旅行" },
  { img: require("@/assets/img/raw_1512446234.jpeg"), title: "汽车" },
  { img: require("@/assets/img/raw_1512446243.jpeg"), title: "时尚" },
  { img: require("@/assets/img/raw_1512446251.jpeg"), title: "科技" }
]
const state = reactive({
  isMenuShow: false
})

//子给父传值，这是子组件传来的事件，其中携带一个参数
const hideMenu = (e) => {
  state.isMenuShow = e
}

//去列表详情页,传参
const goNoteList = (title) => {
  router.push({ path: '/noteList', query: { 'title': title } })
}

//跳转到发布笔记的页面
const goPublich=()=>{
  router.push('/notePublish')
}
</script>

<style lang="less" scoped>
.note-class-wrapper {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;

  .note-class {
    position: absolute;
    transform: translateX(0);
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding: 0 0.5866rem;
    box-sizing: border-box;
    transition: transform 0.3s;

    &.hide {
      transform: translateX(100%);
    }
  }

  .menu {
    width: 100%;
    height: 100vh;
    position: absolute;
    transform: translateX(-100%);
    transition: transform 0.3s; //加个过渡时间

    &.active {
      transform: translateX(0);
    }
  }
}

header {
  display: flex;
  justify-content: space-between;
  height: 1.2rem;
  line-height: 1.2rem;
  margin: 10px 0;

  .van-icon {
    margin-right: 10px;
  }
}

section {
  width: 100%;

  .note-item {
    height: 3.2rem;
    border-radius: 0.3rem;
    margin-bottom: 0.64rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-shadow: 0 0 10px 2px #ccc;
    overflow: hidden;

    // bfc容器
    .title {
      display: block;
      color: #fff;
      font-size: 0.5333rem;
      text-align: center;
      margin-top: 0.5333rem;
    }
  }
}</style>